<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>优惠卷</title>
    <link href="../../css/mui.css" rel="stylesheet"/>
    <link href="../../css/reset.css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no">
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript">
        var docEl = document.documentElement;
        var clientWidth = docEl.clientWidth;
        docEl.style.fontSize = (clientWidth / 10) + 'px';
        $(document).ready(function () {
            (function (doc, win) {
                var docEl = doc.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function () {
                            var clientWidth = docEl.clientWidth;
                            docEl.style.fontSize = (clientWidth / 10) + 'px';
                        };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        });
    </script>
</head>

<body>
<header class="mui-bar mui-bar-nav user-heading">
    <a href="user.html" class="mui-icon back-btn mui-pull-left act-btn"></a>
    <h1 class="mui-title">优惠卷</h1>
</header>
<article class="mui-content coupon-box">
    <section class="search-box wrapper">
        <input type="text" placeholder="请输入您的优惠码" name="coupon_code">
        <button class="mui-btn mui-btn-fruit sign-btn" id="exchange">立即兑换</button>
    </section>
    <section class="coupon-view wrapper">
    </section>
    <a class="btn-get">查看历史优惠卷</a>
</article>
<script src="../../js/mui.min.js"></script>
<script src="../../js/main.js"></script>
<script>
    $(function(){
        if( isLogin() ){
            var user = getUserInfo();
            var event = {
                loadItem: function(type){
                    var data = {
                        apiCode: '_coupon_list_001',
                        userToken: user.userToken,
                        type: type || ''
                    };
                    http(data, function (responed) {
                        if (responed.error == 0) {
                            var html = '';
                            if( responed.info.length ){
                                for( var i in responed.info ){
                                    var item = responed.info[i];
                                    html += '<div class="coupon-view-item '+(item.status == 2 ? 'active' : '')+'">'+
                                            '<div class="item-heading"></div>'+
                                            '<table class="item-body">'+
                                            '<tr>'+
                                            '<td><font>￥</font>'+item.denomination+'</td>'+
                                            '<td>'+
                                            '<p class="coupon-item-title">'+item.title+'</p>'+
                                            '<small>'+item.sub_title+'</small>'+
                                            '<small>'+item.express_time+'</small>'+
                                            '</td> </tr> </table> </div>';
                                }
                            }
                            $('.coupon-view').html(html);
                        } else {
                            mui.alert(responed.info);
                        }
                    });
                },
                bindTap: function(){
                    var self = this;
                    $('.btn-get').on('tap', function(){
                        if( $(this).hasClass('now') ){
                            self.loadItem();
                            $(this).removeClass('now').text('查看历史优惠卷');
                        }else{
                            self.loadItem(1);
                            $(this).addClass('now').text('查看当前优惠卷');
                        }
                    });
                },
                init: function(){
                    this.loadItem();
                    this.bindTap();
                }
            };
            event.init && event.init();
            $('#exchange').on('tap', function(){
                var code = $.trim($('input[name="coupon_code"]').val());
                if( !code ){
                    mui.toast('请输入优惠码');
                    return false;
                }
                var data = {
                    apiCode: '_exchange_coupon_001',
                    userToken: user.userToken,
                    couponcode: code
                };
                http(data, function (responed) {
                    if (responed.error == 0) {
                        mui.toast('优惠卷兑换成功');
                        setTimeout(function(){
                            location.reload();
                        }, 1000);
                    } else {
                        mui.alert(responed.info);
                    }
                });
            });
        }
    });
</script>
</body>

</html>